<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可爱小动物世界</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
            background-image: 
                radial-gradient(#e3f2fd 1px, transparent 1px),
                radial-gradient(#e3f2fd 1px, #f8f9fa 1px);
            background-size: 50px 50px;
            background-position: 0 0, 25px 25px;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
            color: white;
            padding: 2rem 0;
            text-align: center;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" fill="%23ffffff" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E');
            opacity: 0.5;
        }
        
        .header-content {
            position: relative;
            z-index: 1;
        }
        
        header h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            font-weight: 700;
        }
        
        header p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        /* 主内容样式 */
        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1.5rem;
        }
        
        /* 动物卡片容器 */
        .animals-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        /* 动物卡片样式 */
        .animal-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            height: 100%;
            cursor: pointer;
        }
        
        .animal-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        
        /* 卡片头部（图片） */
        .card-header {
            position: relative;
            height: 200px;
            overflow: hidden;
        }
        
        .animal-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .animal-card:hover .animal-image {
            transform: scale(1.05);
        }
        
        /* 卡片身体（内容） */
        .card-body {
            padding: 1.5rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .animal-name {
            font-size: 1.5rem;
            color: #2c3e50;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }
        
        .animal-category {
            display: inline-block;
            background-color: #e3f2fd;
            color: #1976d2;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-bottom: 1rem;
        }
        
        .animal-description {
            color: #7f8c8d;
            line-height: 1.7;
            flex-grow: 1;
        }
        
        /* 卡片页脚 */
        .card-footer {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #ecf0f1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .animal-fact {
            font-size: 0.9rem;
            color: #95a5a6;
            font-style: italic;
        }
        
        /* 特殊样式：水平布局卡片（大屏幕） */
        @media (min-width: 768px) {
            .horizontal-card {
                flex-direction: row;
                height: 300px;
            }
            
            .horizontal-card .card-header {
                width: 40%;
                height: auto;
            }
            
            .horizontal-card .card-body {
                width: 60%;
            }
        }
        
        /* 页脚样式 */
        footer {
            background: #2c3e50;
            color: white;
            padding: 2rem 0;
            text-align: center;
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            header h1 {
                font-size: 2rem;
            }
            
            header p {
                font-size: 1rem;
            }
            
            .animals-container {
                grid-template-columns: 1fr;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animal-card {
            animation: fadeInUp 0.6s ease-out;
        }
        
        /* 延迟动画效果 */
        .animal-card:nth-child(2) {
            animation-delay: 0.1s;
        }
        
        .animal-card:nth-child(3) {
            animation-delay: 0.2s;
        }
        
        .animal-card:nth-child(4) {
            animation-delay: 0.3s;
        }
        
        .animal-card:nth-child(5) {
            animation-delay: 0.4s;
        }
        
        .animal-card:nth-child(6) {
            animation-delay: 0.5s;
        }
        
        /* 高亮效果 */
        .animal-card.highlighted {
            border: 3px solid #ff9a9e;
        }
    </style>
</head>
<body>
    <header>
        <div class="header-content">
            <h1>可爱小动物世界</h1>
            <p>探索地球上最迷人的小动物们，了解它们的习性和特点</p>
        </div>
    </header>
    
    <div class="container">
        <div class="animals-container">
            <!-- 猫咪卡片 -->
            <div class="animal-card horizontal-card">
                <div class="card-header">
                    <img src="https://picsum.photos/id/40/600/400" alt="可爱的家猫，有着柔软的毛发和明亮的眼睛" class="animal-image" loading="lazy">
                </div>
                <div class="card-body">
                    <span class="animal-category">哺乳动物</span>
                    <h3 class="animal-name">猫咪</h3>
                    <p class="animal-description">猫咪是一种小型的食肉哺乳动物，是人类最受欢迎的宠物之一。猫咪有着柔软的毛发、锋利的爪子和敏锐的感官。它们通常很独立，但也会与主人建立深厚的感情。猫咪喜欢独处，但也会在需要时寻求主人的关注和爱抚。</p>
                    <div class="card-footer">
                        <span class="animal-fact">有趣的事实：猫咪的睡眠时间占生命的三分之二</span>
                    </div>
                </div>
            </div>
            
            <!-- 狗狗卡片 -->
            <div class="animal-card">
                <div class="card-header">
                    <img src="https://picsum.photos/id/169/600/400" alt="友好的金毛犬，摇着尾巴注视着镜头" class="animal-image" loading="lazy">
                </div>
                <div class="card-body">
                    <span class="animal-category">哺乳动物</span>
                    <h3 class="animal-name">狗狗</h3>
                    <p class="animal-description">狗狗是人类最早驯化的动物之一，被誉为"人类最好的朋友"。狗狗有各种不同的品种，每种都有其独特的特点和用途。它们忠诚、友好、聪明，能够理解人类的情感和指令。狗狗需要定期的运动和社交互动，以保持身心健康。</p>
                    <div class="card-footer">
                        <span class="animal-fact">有趣的事实：狗狗的嗅觉比人类灵敏10000倍</span>
                    </div>
                </div>
            </div>
            
            <!-- 兔子卡片 -->
            <div class="animal-card">
                <div class="card-header">
                    <img src="https://picsum.photos/id/1024/600/400" alt="白色的小兔子，有着长长的耳朵和红宝石般的眼睛" class="animal-image" loading="lazy">
                </div>
                <div class="card-body">
                    <span class="animal-category">哺乳动物</span>
                    <h3 class="animal-name">兔子</h3>
                    <p class="animal-description">兔子是一种温顺可爱的小型哺乳动物，以其长耳朵、短尾巴和强壮的后腿而闻名。它们主要以草和蔬菜为食，是素食动物。兔子是社交性动物，喜欢与同伴一起生活。作为宠物，兔子需要足够的空间活动，以及专门的饮食和照顾。</p>
                    <div class="card-footer">
                        <span class="animal-fact">有趣的事实：兔子的前牙一生都在生长</span>
                    </div>
                </div>
            </div>
            
            <!-- 小熊猫卡片 -->
            <div class="animal-card horizontal-card">
                <div class="card-header">
                    <img src="https://picsum.photos/id/1062/600/400" alt="红棕色的小熊猫，坐在树枝上好奇地张望" class="animal-image" loading="lazy">
                </div>
                <div class="card-body">
                    <span class="animal-category">哺乳动物</span>
                    <h3 class="animal-name">小熊猫</h3>
                    <p class="animal-description">小熊猫是一种生活在喜马拉雅山脉和中国南部的小型哺乳动物，也被称为"红熊猫"。它们有着红棕色的柔软皮毛、浓密的尾巴和可爱的面孔。小熊猫主要以竹子为食，但也会吃水果、昆虫和小型脊椎动物。它们是树栖动物，擅长攀爬，喜欢在树上睡觉。</p>
                    <div class="card-footer">
                        <span class="animal-fact">有趣的事实：小熊猫和大熊猫并不是近亲</span>
                    </div>
                </div>
            </div>
            
            <!-- 仓鼠卡片 -->
            <div class="animal-card">
                <div class="card-header">
                    <img src="https://picsum.photos/id/1074/600/400" alt="金黄仓鼠，正捧着食物啃咬" class="animal-image" loading="lazy">
                </div>
                <div class="card-body">
                    <span class="animal-category">啮齿动物</span>
                    <h3 class="animal-name">仓鼠</h3>
                    <p class="animal-description">仓鼠是一种小型啮齿动物，因其可爱的外表和相对容易照顾的特点而成为受欢迎的宠物。仓鼠有储存食物的习性，它们会将食物藏在颊囊里带回巢穴。仓鼠是夜行动物，白天大部分时间都在睡觉。作为宠物，它们需要一个配备有轮子、管道和巢穴的笼子，以满足它们的活动和探索需求。</p>
                    <div class="card-footer">
                        <span class="animal-fact">有趣的事实：仓鼠的颊囊可以伸展到身体大小</span>
                    </div>
                </div>
            </div>
            
            <!-- 松鼠卡片 -->
            <div class="animal-card">
                <div class="card-header">
                    <img src="https://picsum.photos/id/335/600/400" alt="灰色的松鼠，抱着一颗松果站在树桩上" class="animal-image" loading="lazy">
                </div>
                <div class="card-body">
                    <span class="animal-category">啮齿动物</span>
                    <h3 class="animal-name">松鼠</h3>
                    <p class="animal-description">松鼠是一种活泼可爱的啮齿动物，广泛分布于世界各地的森林和城市环境中。它们有着毛茸茸的尾巴、灵活的四肢和敏锐的视力。松鼠以坚果、种子、水果和昆虫为食，有着储存食物的习性。它们擅长攀爬和跳跃，能够在树枝间轻松穿梭。松鼠的尾巴不仅有助于保持平衡，还可以作为遮阳伞、保护伞和保暖工具。</p>
                    <div class="card-footer">
                        <span class="animal-fact">有趣的事实：松鼠可以在树枝间跳跃10倍于身体长度的距离</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <div class="footer-content">
            <p>© 2023 可爱小动物世界 | 让我们一起爱护地球上的每一个生命</p>
        </div>
    </footer>
    
    <script>
        // 添加一些简单的交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 为卡片添加点击效果
            const cards = document.querySelectorAll('.animal-card');
            cards.forEach(card => {
                card.addEventListener('click', function() {
                    // 移除其他卡片的高亮
                    cards.forEach(c => c.classList.remove('highlighted'));
                    // 为当前卡片添加高亮
                    this.classList.add('highlighted');
                });
            });
        });
    </script>
</body>
</html>